<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import dayjs from 'dayjs';
import CommonSearch from '@/components/common/common-search.vue';
import Table from '@/components/common/table.vue';
import {
  exportStashTemperatureHumidness,
  getStashTemperatureHumidness,
  getStashTemperatureHumidnessByPage,
  getTemperatureHumidityData,
  updateStashTemperatureHumidness
} from '@/service/api/modules/material-management/stash-temperature-humidness';
import Modal from '@/components/common/modal.vue';
import ChartsTemperature from './modules/charts-temperature.vue';
import ChartsHumidness from './modules/charts-humidness.vue';
import Update from './modules/update.vue';

const searchParams = ref({
  warehouse: '冷冻仓',
  time: dayjs(new Date()).format('YYYY-MM')
});
const commonSearchRef = ref(null);
const searchFormList = [
  {
    type: 'select',
    key: 'warehouse',
    label: '仓库',
    placeholder: '请选择仓库',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6,
    selectOptions: [
      {
        value: '冷冻仓',
        label: '冷冻仓'
      },
      {
        value: '冷冻仓一',
        label: '冷冻仓一'
      },
      {
        value: '冷冻仓二',
        label: '冷冻仓二'
      },
      {
        value: '板料仓一',
        label: '板料仓一'
      },
      {
        value: '板料仓二',
        label: '板料仓二'
      },
      {
        value: '板料仓三',
        label: '板料仓三'
      },
      {
        value: '干膜一期',
        label: '干膜一期'
      },
      {
        value: '干膜二期',
        label: '干膜二期'
      }
    ],
    change() {
      search();
    }
  },
  {
    type: 'datePicker',
    key: 'time',
    label: '年月',
    placeholder: '请输入年月',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6,
    picker: 'month',
    format: 'YYYY-MM',
    valueFormat: 'YYYY-MM'
  }
];

const column = [
  {
    key: 'date',
    dataIndex: 'date',
    title: '日期',
    width: 140,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'tscope2',
    dataIndex: 'tscope2',
    title: '温度预警范围(℃)',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'tscope1',
    dataIndex: 'tscope1',
    title: '温度管控范围(℃)',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'hscope2',
    dataIndex: 'hscope2',
    title: '湿度预警范围(%)',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'hscope1',
    dataIndex: 'hscope1',
    title: '湿度管控范围(%)',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'index',
    dataIndex: 'index',
    title: '01:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data1',
        key: 'data1',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color1
              }}
            >
              {record.data1}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data2',
        key: 'data2',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color2
              }}
            >
              {record.data2}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'data',
    dataIndex: 'data',
    title: '05:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data3',
        key: 'data3',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color3
              }}
            >
              {record.data3}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data4',
        key: 'data4',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color4
              }}
            >
              {record.data4}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'data-1',
    dataIndex: 'data-1',
    title: '09:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data5',
        key: 'data5',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color5
              }}
            >
              {record.data5}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data6',
        key: 'data6',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color6
              }}
            >
              {record.data6}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'data-2',
    dataIndex: 'data-2',
    title: '13:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data7',
        key: 'data7',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color7
              }}
            >
              {record.data7}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data8',
        key: 'data8',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color8
              }}
            >
              {record.data8}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'data-3',
    dataIndex: 'data-3',
    title: '17:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data9',
        key: 'data9',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color9
              }}
            >
              {record.data9}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data10',
        key: 'data10',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color10
              }}
            >
              {record.data10}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'data-4',
    dataIndex: 'data-4',
    title: '21:00',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true,
    children: [
      {
        title: '温度',
        dataIndex: 'data11',
        key: 'data11',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color11
              }}
            >
              {record.data11}
            </span>
          );
        }
      },
      {
        title: '湿度',
        dataIndex: 'data12',
        key: 'data12',
        width: 75,
        align: 'center',
        checked: true,
        ellipsis: true,
        customRender: ({ record }) => {
          return (
            <span
              style={{
                color: record.color12
              }}
            >
              {record.data12}
            </span>
          );
        }
      }
    ]
  },
  {
    key: 'checker',
    dataIndex: 'checker',
    title: '仓库点检确认人',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'checkTime',
    dataIndex: 'checkTime',
    title: '仓库点检确认时间',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equip',
    dataIndex: 'equip',
    title: '设备异常确认人',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipTime',
    dataIndex: 'equipTime',
    title: '设备异常确认时间',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'repair',
    dataIndex: 'repair',
    title: '维修完成确认人',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'repairTime',
    dataIndex: 'repairTime',
    title: '维修完成确认时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipConfirm',
    dataIndex: 'equipConfirm',
    title: '仓库设备正常确认人',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipConfirmTime',
    dataIndex: 'equipConfirmTime',
    title: '仓库设备正常确认时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];
const humiture = ref({
  t: null,
  h: null
});

const tableRef = ref(null);

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      warehouse: '冷冻仓',
      time: dayjs(new Date()).format('YYYY-MM')
    };
    search();
  });
}

// 获取当前温湿度
function getStashTemperatureHumidnessData() {
  getStashTemperatureHumidness({
    warehouse: searchParams.value.warehouse
  }).then(({ data, error }) => {
    if (!error) {
      humiture.value = data;
    }
  });
}
getStashTemperatureHumidnessData();

const chartData = ref([]);
const spinning = ref(false);
function getChartData() {
  spinning.value = true;
  getTemperatureHumidityData({
    warehouse: searchParams.value.warehouse
  })
    .then(({ data, error }) => {
      if (!error) {
        chartData.value = data;
      }
    })
    .finally(() => (spinning.value = false));
}
getChartData();

const selectRow = ref([]);

function tableSelectChange(val) {
  selectRow.value = val;
}

// 确定
function confirm(type) {
  if (!selectRow.value.length) {
    window.$message.error('请选择数据');
    return;
  }
  selectRow.value.forEach(item => {
    item.state1 = type;
    item.warehouse = searchParams.value.warehouse;
  });
  const msg = {
    0: '仓库点检确认',
    1: '设备异常确认',
    2: '维修完成确认',
    3: '仓库设备正常确认'
  };

  window.$modal.confirm({
    title: `是否进行${msg[type]}?`,
    onOk: () => {
      getStashTemperatureHumidnessByPage(selectRow.value).then(({ error }) => {
        if (!error) {
          window.$message.success('确定成功');
          reset();
        }
      });
    },
    onCancel: () => {}
  });
}
function exportData() {
  exportStashTemperatureHumidness({ ...searchParams.value });
}

const modalVisible = ref(false);
const currentRow = ref({});
const modleUpdateLoading = ref(false);
const updateRef = ref(null);
function handleClose() {
  modalVisible.value = false;
}

function handleOk() {
  const formObj = { ...updateRef.value };
  const data = {
    ...currentRow.value,
    ...formObj.model
  };

  modleUpdateLoading.value = true;
  updateStashTemperatureHumidness(data)
    .then(({ error }) => {
      if (!error) {
        window.$message.success('修改成功');
        reset();
        currentRow.value = null;
        handleClose();
      }
    })
    .finally(() => (modleUpdateLoading.value = false));
}

function handleOpenModal() {
  currentRow.value = selectRow.value[0];
  modalVisible.value = true;
}
</script>

<template>
  <div class="stash-temperature-humidness-page h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <div class="content">
      <div class="h-50% w-full">
        <Table
          ref="tableRef"
          v-model:searchParams="searchParams"
          :is-pagination="false"
          :column="column"
          :show-row-selection="true"
          :auto-generate-uuid="true"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          url="/qms/agv/temperatureHumidity/findByMonth"
          class="h-full"
          @table-select-change="tableSelectChange"
        >
          <template #tableTitle>
            <AButton
              v-hasAuth="['material-management:stash-temperature-humidness:stash-check-confirm']"
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              @click="confirm(0)"
            >
              仓库点检确认
            </AButton>
            <AButton
              v-hasAuth="['material-management:stash-temperature-humidness:device-exception-confirmation']"
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              @click="confirm(1)"
            >
              设备异常确认
            </AButton>
            <AButton
              v-hasAuth="['material-management:stash-temperature-humidness:maintenance-completion-confirmation']"
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              @click="confirm(2)"
            >
              维修完成确认
            </AButton>
            <AButton
              v-hsAuth="['material-management:stash-temperature-humidness:warehouse-equipment-properly-confirmed']"
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              @click="confirm(3)"
            >
              仓库设备正常确认
            </AButton>
            <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="exportData">导出</AButton>
            <AButton
              v-hasAuth="['material-management:stash-temperature-humidness:modify-temperature-humidity']"
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              :disabled="selectRow.length !== 1"
              @click="handleOpenModal"
            >
              修改温湿度
            </AButton>
            <AButton
              type="primary"
              class="mini-btn mr-8px"
              size="small"
              ghost
              @click="getStashTemperatureHumidnessData"
            >
              当前温湿度查询
            </AButton>
            <div class="ml-15px mr15px">温度:{{ humiture.t }}℃</div>
            <div>湿度:{{ humiture.h }}%</div>
          </template>
        </Table>
      </div>
      <div class="chart-box h-50% w-full flex">
        <ASpin tip="数据加载中..." :spinning="spinning">
          <ChartsTemperature v-model:searchParams="searchParams" :chart-data="chartData" class="chart h-full w-full" />
        </ASpin>
        <ASpin tip="数据加载中..." :spinning="spinning">
          <ChartsHumidness v-model:searchParams="searchParams" :chart-data="chartData" class="chart h-full w-full" />
        </ASpin>
      </div>
    </div>
    <!-- 修改温度 -->
    <Modal
      v-model:visible="modalVisible"
      title="修改温度"
      width="700px"
      height="500px"
      :centered="true"
      :destroy-on-close="true"
      @close="handleClose"
    >
      <Update ref="updateRef" :row-data="currentRow"></Update>
      <template #footer>
        <div class="modal-footer">
          <AButton :loading="modleUpdateLoading" type="primary" @click="handleOk">修改</AButton>
          <AButton @click="handleClose">关 闭</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.stash-temperature-humidness-page {
  .content {
    height: calc(100% - 42px);
  }
  .chart-box {
    :deep(.ant-spin-nested-loading) {
      width: 50%;
      .ant-spin-container {
        width: 100%;
        height: 100%;
      }
    }
  }
  .chart {
    background: linear-gradient(to bottom, #e0f3ff, #80b8ff);
  }
}
</style>
